<header class="header">
    <div class="header-area header-menuBtn">
        <img src="/public/static/imgs/menu_btn.png">
    </div>
    <div class="header-area header-menuLogo">
        <a href="/">
            <img src="/public/static/imgs/title_logo.png">
        </a>
    </div>
    <div class="header-area header-menuSearch">
        <a href="/newssearch">
            <img src="/public/static/imgs/search.png">
        </a>
    </div>
</header>


<aside class="mui-off-canvas-left">
    <div class="mui-scroll-wrapper">
        <div class="user-register-wrap mui-scroll">
            <input type="text" class="user-account" placeholder="账号" />
            <input type="password" class="user-password" placeholder="密码" />
            <button type="button" class="user-loggin mui-btn mui-btn-danger mui-btn-block">登录</button>
            <div class="user-operation">
                <h5 class="user-register">立即注册</h5>
                <h5 class="user-forget">忘记密码</h5>
            </div>
        </div>
        <div class="user-loggin-wrap mui-scroll" style="display:none;">
            <input type="text" class="user-account" placeholder="账号" />
            <input type="password" class="user-password" placeholder="密码" />
            <input type="password" class="user-password" placeholder="确认密码" />
        </div>
    </div>
</aside>

<style>
    .user-register-wrap {
        padding: 35px 10px 15px;
    }

    .user-operation {
        overflow: hidden;
    }

    .user-register {
        float: left;
    }

    .user-forget {
        float: right;
        color: #e00100;
    }

    #vaptchaContainer{
        margin-bottom: 10px;
    }
</style>

<script src="/public/static/js/jscookie.js"></script>

<script>
    
    (function ($) {
        mui('body').on('tap', 'a', function () {
            window.top.location.href = this.href;
        })
        //打开用户侧边栏
        $('.header').on('tap', '.header-menuBtn', function () {
            $('.mui-off-canvas-wrap').offCanvas('show')
        })

        const getDom = function (elem) {
            return document.querySelectorAll(elem)
        }
        const getDom2 = function (elem) {
            return document.querySelector(elem)
        }


        //登录按钮
        $('.mui-scroll-wrapper').on('tap', '.user-loggin', function (e) {
            var form = {'_csrf':Cookies.get('csrfToken')}
            form.username = getDom('.user-account')[0].value
            form.password = getDom('.user-password')[0].value
            $.ajax('/userloggin', {
                type: 'post',
                dataType: 'json',
                timeout: 10000,
                data: form,
                success: function (data) {
                    console.log(data);
                    
                }
            })
        })
    })(mui)
</script>